<template>
    <div class="has-padding-sm">

        <div class="outline">
            <div class="heading">
                <div class="title">
                    <i class="icon-list"></i> items
                </div>
                <nav class="nav">
<!--                    <a class="gray" @click="getIndex"><i class="icon icon-refresh"></i></a>-->
<!--                    <a class="btn info-pale text-tint" @click="showDisable()">{{availableBtnText}}</a>-->
<!--                    <a class="btn warning-pale text-tint" @click="multipleAvailableDialog(1)"><i class="icon icon-check"></i>{{this.$t('enable')}}</a>-->
<!--                    <a class="btn danger-pale text-tint" @click="multipleAvailableDialog(2)"><i class="icon icon-ban-circle"></i>{{this.$t('disable')}}</a>-->
<!--                    <a class="btn success-pale text-tint" @click="edit()">{{this.$t('create')}}</a>-->
                    <a class="gray rounded" @click="getIndex"><i class="icon icon-refresh"></i></a>
                    <a class="gray rounded" @click="showDisable()">{{availableBtnText}}</a>
                    <a class="gray rounded" @click="multipleAvailableDialog(1)"><i class="icon icon-check"></i>{{this.$t('enable')}}</a>
                    <a class="btn danger text-tint rounded" @click="multipleAvailableDialog(2)"><i class="icon icon-ban-circle"></i>{{this.$t('disable')}}</a>
                    <a class="btn success text-tint rounded" @click="edit()">{{this.$t('create')}}</a>

                </nav>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="column has-padding-v">

            <Loading ref="loading"></Loading>
            <Toast ref="toast"></Toast>
            <Dialog ref="dialog"></Dialog>

            <div class="list parent" v-for="item in result.data">
                <div v-show="item.status === 1 || showDisabled" class="heading">
                    <label :for="item.id" class="menut-title-parent"
                           :class="{active: isSelected(item.id)}">
                        {{item.label}}&nbsp;
                        <span class="text-danger">{{item.path}}</span>&nbsp;
                        <span v-show="item.status === 2" class="label label-sm disabled">disabled</span>
                    </label>
                    <nav class="action nav">
                        <input :id="item.id" class="item" :value="item.id" name="ids[]"
                               :checked="isSelected(item.id)"
                               @click="handleCheck(item.id)"
                               type="checkbox"/>
                        <i class="btn icon icon-pencil" @click="edit(item.id)"></i>
                        <i class="btn icon icon-double-angle-up text-red" @click="sort(item, -1)"></i>
                        <i class="btn icon icon-double-angle-down text-grass" @click="sort(item, 1)"></i>
                        <i class="btn icon icon-trash" @click="removeDialog(item.id)"></i>
                    </nav>
                </div>
                <div class="list">
                    <div v-show="item.status === 1 || showDisabled" class="heading" v-for="item in item.children">
                        <label :for="item.id" class="menut-title-parent"
                               :class="{active: isSelected(item.id)}">
                            └── {{item.label}}&nbsp;
                            <span class="text-danger">{{item.path}}</span>&nbsp;
                            <span v-show="item.status === 2" class="label label-sm disabled">disabled</span>
                        </label>
                        <nav class="action nav">
                            <input :id="item.id" class="item" :value="item.id" name="ids[]"
                                   :checked="isSelected(item.id)"
                                   @click="handleCheck(item.id)"
                                   type="checkbox"/>
                            <i class="btn icon icon-pencil" @click="edit(item.id)"></i>
                            <i class="btn icon icon-double-angle-up text-red" @click="sort(item, -1)"></i>
                            <i class="btn icon icon-double-angle-down text-grass" @click="sort(item, 1)"></i>
                            <i class="btn icon icon-trash" @click="removeDialog(item.id)"></i>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    import '@/assets/css/layer.css'
    import '@/assets/js/layer.js';
    import * as api from './api/index';
    import Dialog from "@/components/Dialog";
    import Loading from "@/components/Loading";
    import Toast from "@/components/Toast";

    export default {
        components: {Dialog, Toast, Loading},
        data() {
            return {
                result: {},
                selectedIds: [],
                showDisabled: false,
                availableBtnText: this.$t('ShowDisabled')
            }
        },
        mounted() {
            this.getIndex();
        },
        methods: {
            edit(id) {
                layer.open({
                    type: 2, // page层
                    area: ['800px', '80%'],
                    title: this.$t('menu create'),
                    shade: 0.5, // 遮罩透明度
                    moveType: 0, // 拖拽风格，0是默认，1是传统拖动
                    shift: -1, // 0-6的动画形式，-1不开启
                    content: id ? '/#/sys/menu/edit/' + id : '/#/sys/menu/edit'
                });
            },
            sort(item, num) { // position 越小越前
                let flag = false;

                if (item.parent_id === 0) {
                    let index = this.result.data.findIndex(a => a.id === item.id);
                    let lastOrNextItem = this.result.data[index + num];
                    item.position = lastOrNextItem.position + num;
                    this.result.data.sort((a, b) => {
                        return (a.position - b.position)
                    });
                    flag = true;
                } else {
                    this.result.data.forEach(function (datum) {
                        if (datum.id === item.parent_id) {
                            let index = datum.children.findIndex(a => a.id === item.id);
                            let lastOrNextItem = datum.children[index + num];
                            if (lastOrNextItem !== undefined) {
                                item.position = lastOrNextItem.position + num;
                                datum.children.sort((a, b) => {
                                    return (a.position - b.position)
                                });
                                flag = true;
                            }
                        }
                    });
                }
                if (flag) {
                    this.$refs.loading.start();
                    let result = api.editSort(item.id, {BeMenu: {position: item.position}});
                    if (result) {
                        this.$refs.loading.stop();
                        this.$refs.toast.show(result.meta.msg);
                    }
                }
            },
            showDisable() {
                if (this.showDisabled) {
                    this.availableBtnText = this.$t('ShowDisabled');
                } else {
                    this.availableBtnText = this.$t('HideDisabled');
                }
                this.showDisabled = !this.showDisabled;
            },
            multipleAvailableDialog(status) {
                if (this.selectedIds.length === 0) {
                    this.$refs.toast.show(this.$t('no items selected'));
                    return;
                }
                this.$refs.dialog.handleConfirm().then(() => {
                    this.setAvailable(status);
                });
            },
            async setAvailable(status) {
                this.$refs.loading.start();
                let result = await api.setAvailable(status, {ids: this.selectedIds});
                if (result) {
                    this.result = result;
                    this.selectedIds = [];
                    this.$refs.loading.stop();
                    this.$refs.toast.show(result.meta.msg);
                }
            },
            removeDialog(id) {
                this.$refs.dialog.handleConfirm().then(() => {
                    this.remove(id);
                });
            },
            async remove(id) {
                this.$refs.loading.start();
                let result = await api.remove({id: id});
                if (result.meta.code === '000') {
                    this.result = result;
                    this.selectedIds = [];
                    this.$refs.loading.stop();
                    this.$refs.toast.show(result.meta.msg);
                }
            },
            async getIndex() {
                this.$refs.loading.start();
                this.selectedIds = [];
                let result = await api.index();
                if (result) {
                    this.result = result;
                    this.$refs.loading.stop();
                }
            },
            handleCheck(id) {
                let index = this.selectedIds.indexOf(id);
                // index !== -1 ? this.selectedIds.splice(index, 1) : this.selectedIds.push(id);
                let that = this;
                if (index === -1) {
                    this.selectedIds.push(id);
                    this.result.data.find(function (item) {
                        if (item.id === id) {
                            item.children.forEach(function (item) {
                                if (that.selectedIds.indexOf(item.id) === -1) {
                                    that.selectedIds.push(item.id);
                                }
                            })
                        }
                    });
                } else {
                    this.selectedIds.splice(index, 1);
                    this.result.data.find(function (item) {
                        if (item.id === id) {
                            item.children.forEach(function (item) {
                                let index = that.selectedIds.indexOf(item.id);
                                if (index !== -1) {
                                    that.selectedIds.splice(index, 1);
                                }
                            })
                        }
                    });
                }
            },
            isSelected(id) {
                return this.selectedIds.indexOf(id) !== -1;
            },
        }
    }
</script>
<style scoped>

    .menut-title-parent {
        flex: 1;
        background-color: rgba(143, 157, 76, .3);
        cursor: pointer;
        padding-left: .5rem;
        padding-right: .5rem;
        height: 1.2rem;
    }

    .menut-title-parent.active {
        color: #fff;
        background-color: rgba(143, 157, 76, 1);
    }

    .action {
        height: 1.2rem;
        align-items: center;
    }

    .action > input, .action > i {
        margin-left: .5rem;
        cursor: pointer;
    }

    .nav > a {
        height: 1.5rem;
        line-height: 1.5rem;
        /*margin-top: .25rem;*/
        margin-right: .25rem;
    }

    .nav.action .btn {
        height: 1.2rem;
        line-height: 1.2rem;
    }

    .list > .list {
        margin-left: 1rem;
    }

    .list.parent {
        width: 40%;
    }

</style>